<template>
	<view>
		<!-- <view class="acea-row row-center row-bottom navbar" :style="{background:`rgb(255 255 255 / ${isScrollTop}%)`,height: navH + 'rpx'}">
			<view>{{title}}</view>
			<view id="home" class="home acea-row row-center-wrapper iconfont icon-xiangzuo" :class="isScrollTop>0.5?'on':''" v-if="returnShow" @tap="returns">
		</view>
		</view> -->
		<!--  :style="'height:' + navH + 'rpx'" -->
		<view :class="'navbar'">
			<view class="navbarH" :style="{background:`rgb(255 255 255 / ${isScrollTop}%)`,height: navH + 'rpx'}">
				<view class="navbarCon acea-row row-center-wrapper">
					<view class="name line1" :class="isScrollTop>0.5?'on':''" >{{title}}</view>
					<view class="iconfont icon-xiangzuo" :class="isScrollTop>0.5?'on':''"  v-if="returnShow" @tap="returns	"></view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			title:{
				type: String,
				default:()=>{
					return ''
				}
			},
			scrollTop: {
				type: Number,
				default: 100
			},
		},
		data(){
			return{
				returnShow: true,//是否展示返回按钮
				navH:'',
				navbarRight:0,
				homeTop: 20,
				// height:
			}
		},
		computed: {
			isScrollTop() {
				return this.scrollTop > 100 ? 100 : this.scrollTop / 1
			}
		},
		mounted() {
			let that = this;
			var pages = getCurrentPages();
			// 判断有没有上个页面
			if(pages.length >= 2){
				// 显示返回按钮
				this.returnShow = true
			}
			// that.returnShow = pages.length === 1 ? false : true;
			// #ifdef MP
			that.navH = getApp().globalData.navHeight;
			// this.$nextTick(function() {
			// 	// #ifdef MP
			// 	const menuButton = uni.getMenuButtonBoundingClientRect();
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query
			// 		.select('#home')
			// 		.boundingClientRect(data => {
			// 			this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
			// 		})
			// 		.exec();
			// 	// #endif
			// });
			// #endif
			// #ifndef MP
			that.navH = 96;
			// #endif
			uni.getSystemInfo({
				success: function(res) {
					// that.height = res.windowHeight;
					//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
					// #ifndef APP-PLUS || H5 || MP-ALIPAY
					that.navbarRight = res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
					// #endif
				}
			});
		},
		methods:{
			// 后退
			returns() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	.navbar1{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}
	.home1 {
		color: #fff;
		// position: fixed;
		width: 56rpx;
		height: 56rpx;
		z-index: 99;
		left: 33rpx;
		// background: rgba(190, 190, 190, 0.5);
		border-radius: 50%;
		font-size: 33rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		&.on {
			background: unset;
			color: rgba(36, 36, 36, 1);
		}
	}
	
	.navbar .navbarH{position:fixed;position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;}
	.navbar .navbarH .navbarCon{position:absolute;bottom:0;height:100rpx;width:100%;}
	.navbar .navbarH .navbarCon .name{color:#ffffff;font-size:34rpx;width: 300rpx;text-align: center;}
	.navbar .navbarH .navbarCon .name.on{color:#000;}
	.navbar .navbarH .navbarCon .icon-xiangzuo{color:#ffffff;position:absolute;font-size:40rpx;left:16rpx;width:100rpx;height:56rpx;line-height:54rpx;top:50%;transform:translateY(-50%);}
	.navbar .navbarH .navbarCon .icon-xiangzuo.on{color:#000;}
</style>